/**
 * useState 是react提供的一个函数，可以帮我们生成一个实现数据驱动页面的函数。
 * useState 该函数生成数据，当数据变了，可以实现页面的更新（无需dom操作）
 */
import {useState} from 'react';

function Counter() {
    let [ count1, opFn ] = useState(0); // [0, fn]



    function increment() {
        count1 = count1 + 1;
        opFn(count1); // 只需要把最新的数据传递给 opFn后，count1数据就会称为传递参数的值，并且页面更新

    }

    function decrement() {
        count1 = count1 - 1;
        opFn(count1); // 只需要把最新的数据传递给 opFn后，count1数据就会称为传递参数的值，并且页面更新
    }

    return (
        <div>
            <h1>我是一个计数器</h1>
            <button onClick={increment} style={{fontSize: '30px'}}>+</button>
            <b id="container">{count1}</b>
            <button onClick={decrement} style={{fontSize: '30px'}}>-</button>
        </div>
    )
}

export default Counter;
